/**
 * 全局公共钩子函数
 */
import { ref } from 'vue'
// 导入监控方法
import { useIntersectionObserver } from '@vueuse/core'
// 需求：
// 1. 通过useObserve函数可以实现对元素或组件是否进入可视区的监控
// 2. 进入可视区后发送请求
/**
  *
  * @param {*} apiFn:function 后台请求方法
  * @returns
  */
export function useObserve (apiFn) {
  // 监控元素或组件是否进入可视区
  /**
      * 步骤：
      * 1. 通过ref获取要监控的元素或组件
      * 2. 调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 监控的回调函数)=》多次触发
      *    说明：监控函数执行完，可以解构出stop方法=》停止监控
      */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      console.log('监控回调函数：', isIntersecting)
      if (isIntersecting) {
        console.log('进入可视区了，发请求')
        // 发请求（动态）
        apiFn()
        // getGoods()
        // 注意：发送完，立即关闭监听=》避免多次发送
        // 关闭监控
        stop()
      }
    },
    {
      threshold: 0 // 进入后立马触发
    }
  )
  // 返回获取监控元素的变量
  return { target }
}
